<template>
  <div class="range-input">
    <el-input
      v-bind="{
        ...controlProps,
        ...minProps,
      }"
      :model-value="form[controlProps.minProp]"
      v-on="pureListeners"
      @update:modelValue="inputHandle($event, 'minProp')"
    />
    <span>~</span>
    <el-input
      v-bind="{
        ...controlProps,
        ...maxProps,
      }"
      :model-value="form[controlProps.maxProp]"
      v-on="pureListeners"
      @update:modelValue="inputHandle($event, 'maxProp')"
    />
    <el-select :model-value="form[controlProps.unitProp]" class="select-box" size="small" @change="selectChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup>
import { usePureListenersAndAttr } from "@/utils";
const { pureAttrs, pureListeners } = usePureListenersAndAttr();

const { events, modelValue, form } = defineProps(["events", "modelValue", "form"]);
const emits = defineEmits(["update:modelValue"]);
const controlProps = computed(() => ({
  clearable: true,
  inputStyle: {
    textAlign: "center",
  },
  clearable: false,
  ...pureAttrs,
}));
const minProps = computed(() => ({
  placeholder: pureAttrs.minPlaceholder || "最小",
}));
const maxProps = computed(() => ({
  placeholder: pureAttrs.maxPlaceholder || "最大",
}));
function inputHandle(value, type) {
  const key = controlProps.value[type]
  emits("update:modelValue", () => ({
    [key]: value,
  }));
}
const options = computed(() => {
  return pureAttrs.unitOptions || [];
});
function selectChange(value) {
  emits("update:modelValue", () => ({
    [controlProps.value.unitProp]: value,
  }));
}
</script>

<style scoped>
.range-input {
  display: flex;
  align-items: center;
}
.select-box {
  width: 54px;
  min-width: 54px;
  border-radius: 2px;
  margin-right: 4px;
  text-align: center;
}
</style>